import { useState } from 'react';
import BoxItem from '@/components/BoxItem';
import { Button, Select, DatePicker, Flex, Input, Tag, Space, Form, Row, Col } from 'antd';
import dayjs from 'dayjs';
import CustomTable from '../components/CustomTable';

const dateRanges = [
	{ label: '今天', value: 'today' },
	{ label: '近七天', value: 'last7days' },
	{ label: '近三十天', value: 'last30days' },
	{ label: '近三个月', value: 'last3months' }
];

const columns = [
	{
		title: '制单时间',
		dataIndex: 'submitTime',
		key: 'submitTime',
		render: (time: number) => (time ? new Date(time).toLocaleString() : '-') // 格式化时间
	},
	{
		title: '单据编码',
		dataIndex: 'documentCode',
		key: 'documentCode'
	},
	{
		title: '往来单位',
		dataIndex: 'customerName',
		key: 'customerName'
	},
	{
		title: '实付金额',
		dataIndex: 'amountPaid',
		key: 'amountPaid',
		render: (amount: number) => `${amount.toFixed(2)}` // 格式化金额
	},
	{
		title: '运费',
		dataIndex: 'shippingCost',
		key: 'shippingCost',
		render: (amount: number) => `${amount.toFixed(2)}` // 格式化运费
	},
	{
		title: '快递成本',
		dataIndex: 'expressCost',
		key: 'expressCost',
		render: (amount: number) => `${amount.toFixed(2)}` // 格式化快递成本
	},
	{
		title: '商品编码',
		dataIndex: 'productCode',
		key: 'productCode'
	},
	{
		title: '商品名称',
		dataIndex: 'productName',
		key: 'productName'
	},
	{
		title: '规格',
		dataIndex: 'specifications',
		key: 'specifications'
	},
	{
		title: '单位',
		dataIndex: 'unit',
		key: 'unit'
	},
	{
		title: '数量',
		dataIndex: 'quantity',
		key: 'quantity'
	}
];

const data = [
	{
		key: '1',
		documentCode: 'DOC001',
		customerName: '张三',
		amountPaid: 5000.5,
		shippingCost: 150.5,
		expressCost: 50.0,
		productCode: 'P001',
		productName: '商品A',
		specifications: '规格A',
		unit: '件',
		quantity: 100,
		submitTime: '2024-10-01T10:00:00Z'
	},
	{
		key: '2',
		documentCode: 'DOC002',
		customerName: '李四',
		amountPaid: 3200,
		shippingCost: 100.0,
		expressCost: 30.0,
		productCode: 'P002',
		productName: '商品B',
		specifications: '规格B',
		unit: '件',
		quantity: 50,
		submitTime: '2024-10-05T11:30:00Z'
	},
	{
		key: '3',
		documentCode: 'DOC003',
		customerName: '王五',
		amountPaid: 7800,
		shippingCost: 200.0,
		expressCost: 80.0,
		productCode: 'P003',
		productName: '商品C',
		specifications: '规格C',
		unit: '件',
		quantity: 120,
		submitTime: '2024-10-10T14:00:00Z'
	},
	{
		key: '4',
		documentCode: 'DOC004',
		customerName: '赵六',
		amountPaid: 4500,
		shippingCost: 120.0,
		expressCost: 40.0,
		productCode: 'P004',
		productName: '商品D',
		specifications: '规格D',
		unit: '件',
		quantity: 60,
		submitTime: '2024-10-15T09:00:00Z'
	},
	{
		key: '5',
		documentCode: 'DOC005',
		customerName: '钱七',
		amountPaid: 6700,
		shippingCost: 180.0,
		expressCost: 60.0,
		productCode: 'P005',
		productName: '商品E',
		specifications: '规格E',
		unit: '件',
		quantity: 90,
		submitTime: '2024-10-20T12:00:00Z'
	},
	{
		key: '6',
		documentCode: 'DOC006',
		customerName: '孙八',
		amountPaid: 5100,
		shippingCost: 160.0,
		expressCost: 55.0,
		productCode: 'P006',
		productName: '商品F',
		specifications: '规格F',
		unit: '件',
		quantity: 80,
		submitTime: '2024-10-25T15:00:00Z'
	},
	{
		key: '7',
		documentCode: 'DOC007',
		customerName: '周九',
		amountPaid: 8900,
		shippingCost: 200.0,
		expressCost: 70.0,
		productCode: 'P007',
		productName: '商品G',
		specifications: '规格G',
		unit: '件',
		quantity: 150,
		submitTime: '2024-10-30T08:00:00Z'
	}
];

const SalesOrder = () => {
	const [form] = Form.useForm();
	const [keyword, setKeyword] = useState<string>('');

	// 日期选择逻辑
	const handleDateChange = (range: string) => {
		const now = dayjs();
		let startDate = null;
		let endDate = null;

		switch (range) {
			case 'today':
				startDate = now.startOf('day');
				endDate = now.endOf('day');
				break;
			case 'last7days':
				startDate = now.subtract(7, 'days');
				endDate = now;
				break;
			case 'last30days':
				startDate = now.subtract(30, 'days');
				endDate = now;
				break;
			case 'last3months':
				startDate = now.subtract(3, 'months');
				endDate = now;
				break;
			default:
				break;
		}

		form.setFieldsValue({
			startDate,
			endDate
		});
	};

	const resetFilters = () => {
		form.resetFields();
		setKeyword('');
	};

	return (
		<div>
			<BoxItem>
				<Flex gap="small" wrap>
					<Button type="primary">新建</Button>
					<Button>导入</Button>
					<Button>导出</Button>
				</Flex>
			</BoxItem>
			<BoxItem>
				<Form form={form} layout="inline" onFinish={() => console.log('搜索')}>
					<Row gutter={16} justify="start">
						{/* 关键词输入框 */}
						<Col>
							<Form.Item label="关键词" name="keyword">
								<Input
									value={keyword}
									onChange={e => setKeyword(e.target.value)}
									placeholder="请输入关键词"
									style={{ width: 160, marginBottom: '20px' }}
								/>
							</Form.Item>
						</Col>

						{/* 起止时间 */}
						<Col>
							<Form.Item label="创建时间" name="startDate">
								<DatePicker style={{ width: 180 }} placeholder="起始时间" allowClear />
							</Form.Item>
						</Col>
						<Col>
							<Form.Item label="至" name="endDate">
								<DatePicker style={{ width: 180 }} placeholder="结束时间" allowClear />
							</Form.Item>
						</Col>

						{/* 快捷时间选择 */}
						<Col>
							<Space>
								{dateRanges.map(({ label, value }) => (
									<Button key={value} onClick={() => handleDateChange(value)}>
										{label}
									</Button>
								))}
							</Space>
						</Col>

						{/* 搜索和重置按钮 */}
						<Col>
							<Button type="primary">搜索</Button>
							<Button type="default" onClick={resetFilters}>
								重置
							</Button>
						</Col>
					</Row>
				</Form>
			</BoxItem>
			<BoxItem>
				<CustomTable dataSource={data} columns={columns} rowKey="key" pagination={true} />
			</BoxItem>
		</div>
	);
};

export default SalesOrder;
